<template>
    <el-table :data="filterTableData" border class="tabledata" :cell-style="cellStyle">
        <el-table-column prop="id" type="index" label="序号" width="90px" align="center" />
        <el-table-column prop="name" sortable label="求职者姓名" />
        <el-table-column prop="age" sortable label="求职者年龄" />
        <el-table-column prop="gender" sortable label="求职者性别" />
        <el-table-column prop="email" sortable label="求职者邮箱" />
        <el-table-column prop="phone" sortable label="求职者电话" />
        <el-table-column prop="personNumber" sortable label="求职者身份证号" />
        <el-table-column prop="address" sortable label="求职者住址" />
        <el-table-column prop="status" sortable label="账号状态" />
        <el-table-column fixed="right" align="right" width="200px">
            <template #header>
                <el-input v-model="search" size="small" placeholder="搜索" />
            </template>
            <template v-slot="scope">
                <el-button type="success" size="small"
                    @click="unLockSeekerInfo($event, scope.row.id, scope.$index)">解封</el-button>
                <el-button type="danger" size="small"
                    @click="lockSeekerInfo($event, scope.row.id, scope.$index)">封禁</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script setup>
import router from "@/router";
import { reactive,ref,computed } from "vue";
import { ElMessage } from 'element-plus'
import { getSeekerInfoList, lockSeeker, unLockSeeker } from "../../utils/request";

const data = reactive({
    isReplied: false,
    pageSize: 10,
    pageNumber: 1,
    seekerInfo: []
})

// 表格字段为空操作
const cellStyle= ({ row, column, rowIndex, columnIndex })=> {
  if (row[column.property] == null) {
    row[column.property] = '--'
  }
}
// 表格搜索，使用计算属性
const search = ref('')
const filterTableData = computed(() =>
  data.seekerInfo.filter(
    (data) =>
      !search.value ||
      data.name.includes(search.value) ||
      data.age == search.value ||
      data.gender.includes(search.value) ||
      data.email.includes(search.value) ||
      data.phone.includes(search.value) ||
      data.personNumber.includes(search.value) ||
      data.address.includes(search.value) ||
      data.status == search.value ||
      data.isAttestation == search.value
  )
)
getSeekerInfoList(data).then(res => {
    if (res.data.code != 200) {
        ElMessage.error(res.data.message || '请求失败')
    } else {
        data.seekerInfo = res.data.data
    }
})
function unLockSeekerInfo(event, id, index) {
    unLockSeeker(id).then(res => {
        if (res.data.code != 200) {
            ElMessage.error(res.data.message || '解封失败')
        } else {
            ElMessage.success(res.data.message || '请求成功')
        }
        router.push("/white")
    })
}
function lockSeekerInfo(event, id, index) {
    lockSeeker(id).then(res => {
        if (res.data.code != 200) {
            ElMessage.error(res.data.message || '封禁失败')
        } else {
            ElMessage.success(res.data.message || '请求成功')
        }
        router.push("/white")
    })
}
</script>
<style>
.tabledata {
    width: 100%;
}

.el-table__row,
.el-table__cell {
    height: 60px;
}
</style>
      